<template>
  <div>
    <!--head头-->
    <van-sticky>
      <van-nav-bar class="bar_sty" left-text="高仿BOOS直聘">
        <van-icon name="plus"  slot="right"/>
        <van-icon name="search"  slot="right"/>        
      </van-nav-bar>
      <!---->
      <div class="title_menu">
        <van-button class="miniBtn" size="mini">推荐</van-button>
        <van-button class="miniBtn" size="mini">最新</van-button>
        <van-button @click='notifyfnBtn'  class="filterBtn" size="mini">推荐</van-button>
        <van-button @click='notifyfnBtn' class="filterBtn" size="mini">最新</van-button>
      </div>
      <!--notify提示组件-->
      <notify v-show="notifyShow"></notify>
    </van-sticky>
      <!--职位列表-->
      <div>
        <job_Item
         v-for="(n,inx) in jobsData" :key=inx 
         :itemObj=n></job_item>
      </div>

      <div style="height:1rem;"></div>
      <!--footer_bar-->
      <footer_bar></footer_bar>
  </div>
</template>

<script>

import job_Item from  './job_Item'
import footer_bar from './footer_bar'
import notify from './notify.vue'
export default {
  components: { job_Item, footer_bar,notify },
  methods: {
    notifyfnBtn(){
      this.notifyShow=true;

      //要判断，当CSS 动画执行结束时，如何如何
      let _notify = document.querySelector(".notify")
      console.log(_notify);
      //webKitAnimationEnd, 是css3动画的“动画结束”事件
      _notify.addEventListener('webkitAnimationEnd',()=>{
        this.notifyShow=false;
      })
    }
  },
  name: 'index_jobList',
  data () {
    return {
      msg: '职位列表',
      jobsData:[
        {
          title:'web前段',
          h2_txt:'什么详 未融资',
          area:['沈阳 和平区','经验不限','本科'],
          hr:{
              img_avatar:'',
              hr_txt:'海峰一招聘者',
          },
          salary:'5-6k',
        },{
          title:'软件开发工程师',
          h2_txt:'牛万科技 未融资',
          area:['沈阳 沈河区','1-3年','学历不限'],
          hr:{
              img_avatar:'',
              hr_txt:'杨女士 -人事 ',
          },
          salary:'5-8k',
        },{
          title:'前段工程师',
          h2_txt:'成林健康科技 未融资',
          area:['沈阳 皇姑区','经验不限','本科'],
          hr:{
              img_avatar:'',
              hr_txt:'马XX -从事招聘专员 ',
          },
          salary:'5-6k',
        },{
          title:'前段技术经理',
          h2_txt:'星擎科技 未融资',
          area:['沈阳 铁西区','5-10年','本科'],
          hr:{
              img_avatar:'',
              hr_txt:'潘舒 -CEO ',
          },
          salary:'6-11k',
        },{
          title:'web前段',
          h2_txt:'什么详 未融资',
          area:['沈阳 和平区','经验不限','本科'],
          hr:{
              img_avatar:'',
              hr_txt:'海峰 -招聘者 ',
          },
          salary:'5-6k',
        }
      ],
     notifyShow:false
    }
  }
}
</script>

<style scoped>
.bar_sty{
    background: #14c1bb;
}
.van-icon-plus:before{
    color: #fff;
    font-size: .4rem;
    margin-right: .1rem;
    border-right: 1px solid #c1c1c1;
    padding-right:.1rem
}
.van-icon-search::before{
    color: #fff;
    font-size: .4rem;
}
.van-nav-bar_text{
    font-size: .35rem;
    color: .4rem;
}
.miniBtn{
    border: 0;
    margin: .1rem 0 0 0;
}
.filterBtn{
    float:right;
    border:0;
    margin:.1rem .1rem 0 0;
    background:#f2f3f5;
}
.title_menu{
    background:#fff;
    height: .6rem;
}
</style>
